<%@ page contentType="text/html;charset=UTF-8" %>
<div class="center-center">   
	<div style="height:30px;margin:-10px -10px 10px -10px; padding:0px 0px 0px 10px;border: 1px solid #aaaaaa;background: url('img/wbg.gif') repeat-x scroll center top transparent !important;">
		<p>角色管理</p>
	</div>
	<div style="height:30px;margin:-10px -10px -10px -13px; padding:10px;border: 1px solid #aaaaaa;">
		<form id="form1">
			<label for="filter_Name">名称:</label><input type="textbox" id="filter_Name" name="filter_Name" class="text ui-widget-content ui-corner-all"/>
			<input type="button" id="search" value="查询" class="button_selector"/>
			<input type="reset" value="清空" class="button_selector"/>
		</form>
	</div>
	<div><table id="flex1" style="display:none;"></table></div>
</div>

<script>
jQuery(function($) {
	
	$("#search").click(function(){  
		var params =  $("#form1").serializeArray();
	    $('#flex1').flexOptions({
	        params: params
	    }).flexReload(); 
	});    
	
	$("#flex1").flexigrid({
		url: 'list.html',
		dataType: 'json',
		method: 'post',
		colModel : [
		{display: 'ID', name : 'id', width:35 , sortable : true, align: 'center'},
		{display: '名称', name : 'name', width:100 , sortable : true, align: 'center'},
		{display: '创建时间', name : 'createTime', width:110 , sortable : true, align: 'center'},
		{display: '创建用户', name : 'createUser', width:100 , sortable : true, align: 'center'}
		],
		buttons : [
		{name: '增加', bclass: 'add', onpress : addRole}, { separator : true },
		{name: '更新', bclass: 'update', onpress : updateRole}, { separator : true },
		{name: '删除', bclass: 'delete', onpress : delRole},	{separator: true}
		],
		sortname: "name",
		sortorder: "asc",
		usepager: true,
		title: '角色列表',
		procmsg: '正在加载数据,请稍等...',
		pagestat: '显示 {from} - {to} ,共 {total}',
		nomsg: '无记录',
		errormsg : '连接错误!',
		height: 'auto',
		useRp: true,
		rp: 15,
		showTableToggleBtn: true,
		autoload: false,
		singleSelect: true,
		//title: false
		rowId : 'id',
		//minColToggle : 1,
		//onToggleCol : false,
		onChangeSort : false,  
		onSuccess : false, 
		onSubmit : false  	
	});   
	
	function delRole(com,grid){
		var selected_count = $('.trSelected', grid).length;  
		if (selected_count == 0) {  
		alert('请选择一条记录!');  
		return;  
		}  
		ids = '';
		$('.trSelected td:nth-child(1) div', grid).each(function(i) {  
		  if (i)  
		      ids += ',';  
		  ids += $(this).text();  
		})  
		if (confirm("确定删除角色[" + ids + "]?")) {  
		$.ajax({  
		  url : 'delete.html',  
		  data : {  
		      ids : ids  
		  },  
		  type : 'POST',
		  dataType : 'json' ,
		  success : function(xht,status) {
			   alert("删除成功 : " + xht.info);
		      $('#flex1').flexReload();  
		  },
		  error : function(xht,status) {
			   alert("删除出错 : " + xht);
		  }       
		});  
		}
		return true;
	}
	
	function updateRole(com,grid){
		var selected_count = $('.trSelected', grid).length; 
		if (selected_count == 0) {  
		alert('请选择一条记录!');  
		return;  
		}  
		ids = '';
		$('.trSelected td:nth-child(1) div', grid).each(function(i) {  
		  if (i)  
		      ids += ',';  
		  ids += $(this).text();  
		})
		$.ajax({  
		  url : 'load.html',  
		  data : {  
		      ids : ids  
		  },  
		  type : 'POST',
		  dataType : 'json' ,
		  success : function(xht,status) {
			   alert(xht);
			   $("#id").val(xht.id);
			   $("#name").val(xht.name);
			   $( "#dialog-form-role" ).dialog( "open" );
		  },
		  error : function(xht,status) {
			   alert("查询角色出错 : " + xht);
		  }       
		});  
		return true;
	}
	
	function addRole(){
		$( "#form2" )[0].reset();
		$( "#id" ).val('');
		$( "#dialog-form-role" ).dialog( "open" );
		return true;
	}
	
	$( ".button_selector" ).button();

	});
	</script>